<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>盒子框架</title>
	<style type="text/css">
		.one {
			width: 700px;
			height: 50px;
			border-left: 3px solid blueviolet;
			border-top: 50%;
			border-top: 3px solid blueviolet;
			border-right: 3px solid blueviolet;
			/* border-bottom: 3px solid blueviolet; */
		}

		.two {
			width: 200px;
			height: 300px;
			border-left: 3px solid #ffcc33;
			border-top: 100%;
			border-top: 3px solid #ffcc33;
			/* border-right: 3px solid  #ffcc33; */
			/* border-bottom: 3px solid  #ffcc33; */
			float: left;
		}

		.three {
			width: 497px;
			height: 300px;
			border-left: 3px solid red;
			border-top: 50%;
			border-top: 3px solid red;
			border-right: 3px solid red;
			/* border-bottom: 3px solid red; */
			float: left;
		}

		.four {
			width: 700px;
			height: 50px;
			border-left: 3px solid black;
			border-top: 50%;
			border-top: 3px solid black;
			border-right: 3px solid black;
			border-bottom: 3px solid black;
			clear: left;
		}
	</style>
</head>

<body>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
	<div class="four"></div>

</body>

</html>